<script setup lang="ts">
import gsap from 'gsap'
import { useSound } from '@vueuse/sound'
import buttonSfx from '@/assets/sound/button_click.mp3'

const appStore = useAppStore()
const router = useRouter()
const route = useRoute()
// 0-9 图片资源列表
const numberList = [
  new URL('@/assets/common/font_0.png', import.meta.url).href,
  new URL('@/assets/common/font_1.png', import.meta.url).href,
  new URL('@/assets/common/font_2.png', import.meta.url).href,
  new URL('@/assets/common/font_3.png', import.meta.url).href,
  new URL('@/assets/common/font_4.png', import.meta.url).href,
  new URL('@/assets/common/font_5.png', import.meta.url).href,
  new URL('@/assets/common/font_6.png', import.meta.url).href,
  new URL('@/assets/common/font_7.png', import.meta.url).href,
  new URL('@/assets/common/font_8.png', import.meta.url).href,
  new URL('@/assets/common/font_9.png', import.meta.url).href,
]

// 成品视频地址
const currentVideo = `video/${route.params.order}.mp4`

function generateNumer(number: number) {
  return number.toString().split('').map(i => numberList[Number(i)])
}

const passTT = useStorage('pass-tt', Date.now(), sessionStorage)
const PassTime = computed(() => {
  const time = Math.round((Date.now() - passTT.value) / 1000)
  // 限制时间最大999
  return generateNumer(time > 999 ? 999 : time)
})
const { play: playButtonSfx } = useSound(buttonSfx)

onMounted(() => {
  appStore.setLayoutTip('')
  gsap.timeline()
    .from('#endLight', { scale: 0, opacity: 0, duration: 0.7, delay: 1.5 })
    .from('#passTime', { scale: 0, opacity: 0, duration: 0.7, ease: 'elastic.out(1,0.2)' })
})
const showProdVideo = ref(false)

// 观看成品页面状态切换
const VideoRef = ref()
const BgPlayer = document.querySelector('#bgPlayer')!
function toggleProdVideo() {
  playButtonSfx()
  showProdVideo.value = !showProdVideo.value
  if (showProdVideo.value) {
    // 显示
    BgPlayer.pause()
  }
  else {
    // 隐藏
    VideoRef.value.pause()
    BgPlayer.play()
  }
}

// 继续学习
function continueStudy() {
  playButtonSfx()
  router.push(`/e-school/2023/${route.params.order}`)
}
</script>

<template>
  <div class="h-full flex flex-col items-center gap-1em p-y-2em overflow-hidden relative end-bg" @click.stop="() => { }">
    <div id="endLight" class="end-light absolute" />
    <div class="end-img relative m-t-10em">
      <div id="passTime" class="absolute top-80% right-35% flex justify-center w-17%">
        <img v-for="(i, index) in PassTime" :key="index" :src="i" class="w-50px h-45px object-contain">
      </div>
    </div>
    <div class="guankan" @click="toggleProdVideo" />
    <div class="xuexi" @click="continueStudy" />
  </div>

  <div v-show="showProdVideo" style="width: 100%;height: 100%;" class="fixed top-0 left-0 bg-#181818 z-1 flex flex-col"
    @click.stop="() => { }">
    <div style="display: flex; flex-direction: column;align-items: center;">
      <div class="m-top" style="position: relative;">
        <div class="top-text">
          <p>实际导出成品</p>
          <P>本地相册中浏览</P>
        </div>
        <div class="close" @click="toggleProdVideo" />
      </div>
      <video ref="VideoRef" :src="currentVideo" class="Video  m-auto" controls />
    </div>
    <div class="flex-1 flex-center" />
  </div>
</template>

<style scoped lang="scss">
@media screen and (min-width:440px) {
  .top-text {
    font-size: 30px;
    color: orange;
    width: 210px;
    top: 17px;
    left: 70px;
    position: absolute;
    text-align: center;
    line-height: 32px;
    font-family: title, sans-serif;
  }
  .end-light {
    width: 400px;
    height: 400px;
    background-image: url('@/assets/common/finish-light.png');
    background-size: 100% 100%;
    transform: scale(1.2);
    animation: spin 15s linear infinite;
  }

  .guankan {
    background-image: url(/src/assets/common/prod_view.png);
    background-size: contain;
    width: 156px;
    height: 78px;
    margin-top: auto;
    z-index: 1;
  }

  .xuexi {
    background-image: url(/src/assets/common/continue_study.png);
    background-size: 100% 100%;
    width: 156px;
    height: 78px;
    z-index: 1;
  }

  .m-top {
    height: 85px;
    width: 400px;
    background-color: transparent;
  }

  .Video {
    width: 400px;
    height: 624px;
    margin: 0px auto;
  }

  .close {
    background-image: url(/src/assets/common/back_btn.png);
    background-size: 100% 100%;
    width: 62px;
    height: 62px;
    top: 15px;
    right: 15px;
    position: absolute;
  }
}

@media screen and (max-width:440px) {
  .top-text {
    font-size: 7.5vw;
    color: orange;
    width: 53vw;
    top: 5.5vw;
    left: 21vw;
    position: absolute;
    text-align: center;
    line-height: 32px;
    font-family: title, sans-serif;
  }
  .end-light {
    width: 100vw;
    height: 100vw;
    background-image: url('@/assets/common/finish-light.png');
    background-size: 100% 100%;
    transform: scale(1.2);
    animation: spin 15s linear infinite;
  }

  .guankan {
    background-image: url(/src/assets/common/prod_view.png);
    background-size: contain;
    width: 40vw;
    height: 20vw;
    margin-top: auto;
    z-index: 1;
  }

  .xuexi {
    background-image: url(/src/assets/common/continue_study.png);
    background-size: 100% 100%;
    width: 40vw;
    height: 20vw;
    z-index: 1;
  }

  .m-top {
    height: 22vw;
    width: 100%;
    background-color: transparent;
  }

  .Video {
    width: 100%;
    height: 160vw;
    margin: 0px auto;
  }

  .close {
    background-image: url(/src/assets/common/back_btn.png);
    background-size: 100% 100%;
    width: 16vw;
    height: 16vw;
    top: 5vw;
    right: 5vw;
    position: absolute;
  }
}

.back-btn {
  background-image: url('@/assets/common/back_btn.png');
  background-size: 100% 100%;

  &:hover {
    background-image: url('@/assets/common/back_btn_hover.png');
  }
}

.continue-btn {
  background-image: url('@/assets/common/continue_study.png');
  background-size: 100% 100%;

  &:hover {
    background-image: url('@/assets/common/continue_study_hover.png');
  }
}

.prod-btn {
  background-image: url('@/assets/common/prod_view.png');

  &:hover {
    background-image: url('@/assets/common/prod_view_hover.png');
  }
}

.end-bg {
  background-image: url('@/assets/common/end_bg.jpg');
}



@keyframes spin {
  from {
    transform: rotate(0deg) scale(1.2);
  }

  to {
    transform: rotate(360deg) scale(1.2);
  }
}

.end-img {
  width: 900px;
  height: 520px;

  transform: scale(0.9);
  zoom: 0.4;
  background-image: url('@/assets/animation/finish.png');
  background-repeat: no-repeat;
  background-position: -70px 0;
  animation: anime 2s steps(54) 200ms;
  animation-fill-mode: forwards;
}

@keyframes anime {
  100% {
    background-position: -56284px 0;
  }
}
</style>
